import { createBrowserRouter, RouteObject, Navigate } from 'react-router-dom'
// import App from "@/App";
// import Home from "@/pages/home";
// import LowCodeEditorPlus from "@/pages/lowCodeEditorPlus";
// import Login from '@/pages/login';
// import Register from '@/pages/register';
// import UpdatePassword from '@/pages/updatePassword';
// import PageManager from '@/pages/pageManager';
// import MenuManager from '@/pages/menuManager';
import {lazy, Suspense} from 'react';
import { Spin } from 'antd';
import { routerPrefix } from '@/utils/common';


const lazyLoad = (factory: () => Promise<any>) => {
  const Module = lazy(factory)
  return (
    <Suspense fallback={<Spin size="large" style={{display: 'flex', justifyContent:'center', alignItems: 'center', width: '100vw',height: '100vh'}}/>}>
      <Module />
    </Suspense>
  )
}
const routes: RouteObject[] = [
  {
    path: '/',
    element: lazyLoad(()=>import('@/pages/home')),
    children:[
      {
        path: 'home',
        element: <Navigate to="/"/>,
      },
      {
        path: 'pageManager',
        element: lazyLoad(()=>import('@/pages/pageManager'))
      },
      {
        path: 'menuManager',
        element: lazyLoad(()=>import('@/pages/menuManager'))
      },
      {
        path: 'legoPage/:path',
        element: lazyLoad(()=>import('@/pages/lowCodeEditorPlus/legoPage'))
      },
    ]
  },
  {
    path: 'lowCodeEditorPlus/:path',
    element: lazyLoad(()=>import('@/pages/lowCodeEditorPlus'))
  },
  {
    path: 'login',
    element: lazyLoad(()=>import('@/pages/login'))
  },
  {
    path: 'register',
    element: lazyLoad(()=>import('@/pages/register'))
  },
  {
    path: 'update_password',
    element: lazyLoad(()=>import('@/pages/updatePassword'))
  }
]
const basename = routerPrefix(import.meta.env.MODE)
export const router = createBrowserRouter(routes,{basename})